<!-- 首页 -->
<template>
    <el-card>
        <div class="box">
            <el-image :src="userStore.avatar">
                <template #error>
                    <div class="image-slot">
                        图片加载失败
                    </div>
                </template>
            </el-image>
            <div class="font">
                {{ getTimeHi() }}，{{ userStore.username }}
            </div>
        </div>
    </el-card>
    <div class="bottom">
        <SvgIcon name="homebg" width="400px" height="400px"/>
    </div>
</template>

<script setup lang="ts">
import { getTimeHi } from '@/utils/time';
import SvgIcon from '@/components/SvgIcon.vue';
import useUserStore from '@/store/modules/user';
// 用户信息的小仓库
let userStore = useUserStore();
</script>

<style scoped lang="scss">
.box {
    display: flex;

    .el-image {
        padding: 0 5px;
        max-width: 300px;
        max-height: 200px;
        width: 100px;
        height: 100px;
        border-radius: 100%;
        margin-right: 20px;

        .image-slot {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: var(--el-fill-color-light);
            color: var(--el-text-color-secondary);
            font-size: 15px;
        }
    }

    .font {
        line-height: 100px;
        font-weight: 900;
    }
}
.bottom{
    display: flex;
    justify-content: center;
}
</style>